import React from 'react'
import { Button, Form, Card, Space } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';
import { delQuestion } from '../../../../store/models/questions';
import Single from '../../../../components/single/Single'
import Multiple from '../../../../components/multiple/Multiple'
import Judge from '../../../../components/judge/Judge'
import Explain from '../../../../components/explain/Explain'
import type { Question } from '../../../../store/models/questions'
import { useDispatch } from 'react-redux'
import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';

interface Props {
  cardItem:Question
  cardIndex:number
}


const QuestionType = {
  single:Single,
  multiple:Multiple,
  judge:Judge,
  explain:Explain
}



const DragCard: React.FC<Props> = ({cardItem,cardIndex}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({id: cardItem.id});
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const dispatch = useDispatch()
  const QuestionCom = QuestionType[cardItem.type]
  
  
  
  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <Form.List name={cardItem.type} key={cardItem.id}>
        {(fields, { add, remove }) => (
          // 每个标题里的具体内容
          <Card 
            title={cardItem.title} 
            style={{border:'1px solid',marginBottom: 20}}
            extra=
            {
              <Space>
                <Button type="dashed" onClick={() => add()}>添加{cardItem.title}</Button>
                <Button type="dashed" danger onClick={() => dispatch(delQuestion(cardIndex))}>删除</Button>
              </Space>
            }
          >
            {fields.map((field) => (
              <Card
                size="small"
                title={`${cardItem.title} ${field.name + 1}`}
                key={field.key}
                style={{marginBottom:20,border:'1px solid'}}
                extra={
                  <DeleteOutlined onClick={() => { remove(field.name) }}
                  />
                }
              >
                {/* 渲染不同的每个题型 */}
                <QuestionCom fileName = {field.name}/>
              </Card>
            ))}
            
          </Card>
        )}
      </Form.List>
    </div>


    
  )
}

export default DragCard